<template>
  <div class="skills">
    <!-- 页面头部 -->
    <section class="skills__header section">
      <div class="container">
        <h1 class="section-title">技能展示</h1>
        <p class="skills__intro">
          以下是我掌握的技术栈和工具，持续学习和提升中
        </p>
      </div>
    </section>
    
    <!-- 技能统计 -->
    <section class="skills__stats section">
      <div class="container">
        <div class="skills__stats-grid">
          <div class="stat-card">
            <ElIcon :size="48" class="stat-card__icon">
              <TrophyBase />
            </ElIcon>
            <div class="stat-card__value">{{ totalSkills }}</div>
            <div class="stat-card__label">掌握技能</div>
          </div>
          <div class="stat-card">
            <ElIcon :size="48" class="stat-card__icon">
              <Medal />
            </ElIcon>
            <div class="stat-card__value">{{ expertSkills }}</div>
            <div class="stat-card__label">精通技能</div>
          </div>
          <div class="stat-card">
            <ElIcon :size="48" class="stat-card__icon">
              <TrendCharts />
            </ElIcon>
            <div class="stat-card__value">{{ averageLevel }}%</div>
            <div class="stat-card__label">平均熟练度</div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 技能分类展示 -->
    <section class="skills__categories section">
      <div class="container">
        <div class="skills__grid">
          <SkillCard
            v-for="(category, index) in skillsData"
            :key="index"
            :category="category"
          />
        </div>
      </div>
    </section>
    
    <!-- 技能雷达图（可选） -->
    <section class="skills__radar section">
      <div class="container">
        <h2 class="section-title">技能概览</h2>
        <div class="skills__radar-content">
          <p class="skills__radar-desc">
            持续学习新技术，保持技术栈的更新和扩展
          </p>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { TrophyBase, Medal, TrendCharts } from '@element-plus/icons-vue'
import { skillsData } from '@/data/skills'
import SkillCard from '@/components/sections/SkillCard.vue'

// 计算总技能数
const totalSkills = computed(() => {
  return skillsData.reduce((total, category) => {
    return total + category.skills.length
  }, 0)
})

// 计算精通技能数（熟练度 >= 80）
const expertSkills = computed(() => {
  let count = 0
  skillsData.forEach(category => {
    category.skills.forEach(skill => {
      if (skill.level >= 80) {
        count++
      }
    })
  })
  return count
})

// 计算平均熟练度
const averageLevel = computed(() => {
  let totalLevel = 0
  let count = 0
  skillsData.forEach(category => {
    category.skills.forEach(skill => {
      totalLevel += skill.level
      count++
    })
  })
  return count > 0 ? Math.round(totalLevel / count) : 0
})
</script>

<style lang="scss" scoped>
.skills {
  &__header {
    text-align: center;
  }
  
  &__intro {
    max-width: 800px;
    margin: 0 auto;
    font-size: $font-size-lg;
    color: var(--text-secondary);
    line-height: 1.8;
  }
  
  &__stats {
    background: var(--bg-secondary);
  }
  
  &__stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: $spacing-xl;
    
    @include respond-to('md') {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  &__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: $spacing-xl;
    
    @include respond-to('md') {
      grid-template-columns: repeat(2, 1fr);
    }
    
    @include respond-to('lg') {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  &__radar {
    background: var(--bg-secondary);
  }
  
  &__radar-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
  }
  
  &__radar-desc {
    font-size: $font-size-lg;
    color: var(--text-secondary);
    line-height: 1.8;
  }
}

.stat-card {
  text-align: center;
  padding: $spacing-2xl;
  background: var(--bg-primary);
  border-radius: $radius-lg;
  @include transition(transform, box-shadow);
  
  &:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
  }
  
  &__icon {
    color: $primary-color;
    margin-bottom: $spacing-md;
  }
  
  &__value {
    font-size: $font-size-4xl;
    font-weight: $font-weight-bold;
    color: $primary-color;
    margin-bottom: $spacing-sm;
  }
  
  &__label {
    font-size: $font-size-base;
    color: var(--text-secondary);
  }
}
</style>

